<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动画</title>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <style type="text/css">
        .run{
            position: relative;
            width: 1200px;
            max-width: 1200px;
            height:800px;
            margin: 0 auto;
            /*border:1px solid red;*/
            background-image: url("images/self_help_shop_bg.png");
            background-size: auto 436px;
            background-repeat: no-repeat;
            background-position: 409px 59px;
            /*top:50%;*/
            /*margin-top: -600px;*/

        }
        /*.run .begin{*/
            /*position: relative;*/
            /*width: 600px;*/
            /*height:600px;*/
            /*margin: 0 auto;*/
            /*border-radius:300px;*/
            /*border: 1px solid blue;*/
            /*z-index: 100;*/
          /*}*/
        .run img{
            width: 80px;
            height: 80px;
            opacity: 0;
            filter:Alpha(opacity=0);
        }
        .run .begin .show0{
            opacity: 1;
            filter:Alpha(opacity=100);
        }
        .run .begin .show1{
            position: relative;
            top: 100px;
            left:300px;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            transition: all .2s;
        }

        .run .begin .show2{
            position: relative;
            top: 193px;
            left:180px;
            -webkit-transition: all .2s .1s;
            -moz-transition: all .2s .1s;
            -o-transition: all .2s .1s;
            transition: all .2s .1s;

        }
        .run .begin .show3{
            position: relative;
            top: 289px;
            left:74px;
            -webkit-transition: all .2s .2s;
            -moz-transition: all .2s .2s;
            -o-transition: all .2s .2s;
            transition: all .2s .2s;

        }
        .run .begin .show4{
            position: relative;
            top: 384px;
            left:6px;
            -webkit-transition: all .2s .3s;
            -moz-transition: all .2s .3s;
            -o-transition: all .2s .3s;
            transition: all .2s .3s;
        }
        .run .begin .show5{
            position: relative;
            top: 463px;
            left:-17px;
            -webkit-transition: all .2s .4s;
            -moz-transition: all .2s .4s;
            -o-transition: all .2s .4s;
            transition: all .2s .4s;

        }
        .run .begin .show6{
            position: relative;
            top: 489px;
            left:-8px;
            -webkit-transition: all .2s .5s;
            -moz-transition: all .2s .5s;
            -o-transition: all .2s .5s;
            transition: all .2s .5s;
        }
        .run .begin .show7{
            position: relative;
            top:480px;
            left:-2px;
            -webkit-transition: all .2s .6s;
            -moz-transition: all .2s .6s;
            -o-transition: all .2s .6s;
            transition: all .2s .6s;
        }
        .run .begin .show8{
            position: relative;
            top: 460px;
            left:7px;
            -webkit-transition: all .2s .7s;
            -moz-transition: all .2s .7s;
            -o-transition: all .2s .7s;
            transition: all .2s .7s;
        }
        .run .begin .show9{
            position: relative;
            top: 386px;
            left:-10px;
            -webkit-transition: all .2s .8s;
            -moz-transition: all .2s .8s;
            -o-transition: all .2s .8s;
            transition: all .2s .8s;
        }
        .run .begin .show10{
            position: relative;
            top: 289px;
            left:-67px;
            -webkit-transition: all .2s .9s;
            -moz-transition: all .2s .9s;
            -o-transition: all .2s .9s;
            transition: all .2s .9s;
        }
        .run .begin .show11{
            position: relative;
            top:195px;
            left:-160px;
            -webkit-transition: all .2s 1s;
            -moz-transition: all .2s 1s;
            -o-transition: all .2s 1s;
            transition: all .2s 1s;
        }
        .run .begin .show12{
            position: relative;
            top: 101px;
            left:-293px;
            -webkit-transition: all .2s 1.1s;
            -moz-transition: all .2s 1.1s;
            -o-transition: all .2s 1.1s;
            transition: all .2s 1.1s;
        }

    </style>
</head>
<body>
<div class="run">
    <div class="begin">

        <img class="imgcss show1" src="images/ad.png">
        <img class="imgcss show2" src="images/alipay.png">
        <img class="imgcss show3" src="images/app.png">
        <img class="imgcss show4" src="images/cosmetic.png">
        <img class="imgcss show5" src="images/drink.png">
        <img class="imgcss show6" src="images/games.png">
        <img class="imgcss show7" src="images/get_ticket.png">
        <img class="imgcss show8" src="images/lottery_ticket.png">
        <img class="imgcss show9" src="images/nfc.png">
        <img class="imgcss show10" src="images/shake.png">
        <img class="imgcss show11" src="images/wechat_alipay.png">
        <img class="imgcss show12" src="images/wifi.png">
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var $imgs=$('.imgcss');
        $.each($imgs,function(index,dom){//dom相当于$imgs中的每个元素
            $(dom).addClass('show0');
        });
    });
</script>
</body>
</html>